<template>
  <!-- 基本信息页面 -->
  <div>
    <el-form :model="carDetail" label-width="80px" :rules="rules">
      <el-form-item label="车辆编号" prop="id">
        <el-input v-model="id" />
      </el-form-item>
      <el-form-item label="车牌号码" prop="licensePlate">
        <el-input v-model="carDetail.licensePlate" />
      </el-form-item>
      <el-form-item label="车型名称" prop="truckTypeName">
        <el-select v-model="carDetail.truckTypeName">
          <!-- <el-option :label="form.type" :value="form.type" /> -->
        </el-select>
      </el-form-item>

      <el-form-item label="车辆体积" prop="allowableVolume">
        <el-input v-model="carDetail.allowableVolume" />
      </el-form-item>
      <el-form-item label="车辆载重" prop="allowableLoad">
        <el-input v-model="carDetail.allowableLoad" />
      </el-form-item>
      <el-form-item label="GPSID" prop="deviceGpsId">
        <el-input v-model="carDetail.deviceGpsId" />
      </el-form-item>
      <el-form-item label="图片信息">
        <!-- <ImageUpload :limit="2" />
         -->
        <el-upload
          action="#"
          list-type="picture-card"
          :file-list="fileList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible="showDialog" @close="showDialog = false">
          <img style="width: 100%" :src="imgUrl" />
        </el-dialog>
      </el-form-item>

      <el-form-item class="but">
        <el-button type="warning">编辑</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getCarDetailApi } from '@/api/car'
export default {
  data() {
    return {
      id: '', // 车辆编号
      carDetail: {}, // 车辆详情
      carRun: {}, // 车辆行驶证详情
      showDialog: false, // 预览弹层的显示状态
      imgUrl: '', // 预览的图片地址
      item: '',
      fileList: [], // 上传图片列表
      rules: {
        id: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: ['blur', 'change']
          }
        ],
        licensePlate: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: ['blur', 'change']
          }
        ],
        truckTypeName: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: ['blur', 'change']
          }
        ],
        allowableVolume: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: ['blur', 'change']
          }
        ],
        allowableLoad: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: ['blur', 'change']
          }
        ],
        deviceGpsId: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  async created() {
    this.id = this.$route.params.id
    const res = await getCarDetailApi(this.$route.params.id)
    this.carDetail = res.data.data
    console.log(res)
    if (res.data.data.picture === '') {
      return
    } else {
      const arr = res.data.data.picture.split(',')
      arr.forEach((item) => {
        const one = {
          name: Math.floor(Math.random() * 99) + 1,
          url: item
        }
        this.fileList.push(one)
      })
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      // file : 点击预览时拿到的图片对象
      // console.log(file)
      this.imgUrl = file.url
      this.showDialog = true
    }
  }
}
</script>
<style scoped lang="scss">
.el-form {
  // background-color: pink;
  height: 530px;
  padding-top: 20px;
  .el-form-item {
    // width: 300px;
    float: left;
    margin: 10px 20px;
    ::v-deep {
      .el-form-item__label {
        width: 100px !important;
      }

      .el-form-item__content {
        margin-left: 100px !important;
        // width: 200px !important;
        .el-input__inner {
          width: 180px;
        }
      }
    }
  }
}

.but {
  position: absolute;
  left: 400px;
  bottom: 40px;
}
</style>
